<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="ydscsjtjbForm" class="demo-form-inline">
        <el-form-item label="选择月份:">
          <el-date-picker
            v-model="searchDate"
            type="month"
            align="right"
            unlink-panels
            range-separator="至"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden">
        <div class="mytitle">
          <svg-icon icon-class="A5" class="myIcon" />
          产量情况
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
      >
      <!-- <el-table-column v-if="show" type="index" label="序号" :index="indexMethod">
        </el-table-column> -->
        <el-table-column align="center" prop="" label="<<">
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="rq" label="日期">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="compony" label="公司">
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="gsjh" label="公司计划">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="gsws" label="公司外输">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="gshs" label="公司核实">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="gsmd" label="公司末端">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="gscz" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="" label="">
            <el-table-column align="center" prop="md" label="末端">
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="scdw" label="生产单位">
          <el-table-column align="center" prop="yq" label="一区">
            <el-table-column align="center" prop="yqjh" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="yqmd" label="末端">
            </el-table-column>
            <el-table-column align="center" prop="yqbfb" label="百分比">
            </el-table-column>
            <el-table-column align="center" prop="yqft" label="分摊">
            </el-table-column>
            <el-table-column align="center" prop="yqhsh" label="核实后">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="eq" label="二区">
            <el-table-column align="center" prop="eqjh" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="eqmd" label="末端">
            </el-table-column>
            <el-table-column align="center" prop="eqbfb" label="百分比">
            </el-table-column>
            <el-table-column align="center" prop="eqft" label="分摊">
            </el-table-column>
            <el-table-column align="center" prop="eqhsh" label="核实后">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="sanq" label="三区">
            <el-table-column align="center" prop="sqjh" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="sqmd" label="末端">
            </el-table-column>
            <el-table-column align="center" prop="sqbfb" label="百分比">
            </el-table-column>
            <el-table-column align="center" prop="sqft" label="分摊">
            </el-table-column>
            <el-table-column align="center" prop="sqhsh" label="核实后">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="siq" label="四区">
            <el-table-column align="center" prop="siqjh" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="siqmd" label="末端">
            </el-table-column>
            <el-table-column align="center" prop="siqbfb" label="百分比">
            </el-table-column>
            <el-table-column align="center" prop="siqft" label="分摊">
            </el-table-column>
            <el-table-column align="center" prop="siqhsh" label="核实后">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="wq" label="五区">
            <el-table-column align="center" prop="wuqjh" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="wuqmd" label="末端">
            </el-table-column>
            <el-table-column align="center" prop="wuqcz" label="差值">
            </el-table-column>
            <el-table-column align="center" prop="wuqhsh" label="核实后">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="zz" label="肇州">
            <el-table-column align="center" prop="zzjh" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="zzmd" label="末端">
            </el-table-column>
            <el-table-column align="center" prop="zzcz" label="差值">
            </el-table-column>
            <el-table-column align="center" prop="zzhsh" label="核实后">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="compony1" label="公司">
            <el-table-column align="center" prop="gsldy" label="落地油">
            </el-table-column>
          </el-table-column>
        </el-table-column>
 
      </el-table>

      <!-- 分页器 -->
      <el-pagination align='right'
        background
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-sizes="[5,10, 20, 30, 40]" 
        :page-size="pageSize" 
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 弹出框 -->
  </div>
</template>

<script>
import clqkApi from "@/api/clqk";
import Bolb from "@/vendor/Blob";
import Export2Excel from "@/vendor/Export2Excel";
import XLSX from "xlsx-style";
export default {
  data() {
    return {
      show:false,//隐藏序列
      pageNo: 1, //当前页码
      currentPage: 1, // 当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      // table数据
      tableData: [],
      startDate: "",
      endDate: "",
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      //获取当前日期
      currentTime: "",
      //编辑框是否显示
      dialogFormVisible: false,
      //弹出框是否是查看
      ischeck: false,
      //控制查看时不可更改数据
      isInput: false,
      //弹出框标题
      myDialogTitle: "",
      searchDate: null,
      chushiyue:'',
      chushinian:''
    };
  },
  created() {
    var date=new Date()
    this.search(2023,7);
    //this.getDataRq();
    // this.reload();
    // //this.exportExcel();
  },
  mounted() {
    this.filterTime();
    // this.initDate();
  },
  methods: {
    /**
     * 查询列表
     */
    async search(year,month) {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await clqkApi.getClqkList(
        year,
        month
      );
      //判断是否成功
      if (res.success) {
        //赋值
        this.tableData = res.data;
        this.total = res.data.length
      }
    },
    //条件查询
    formSearch() {
      var arr=this.searchDate.split('-')
      var year=parseInt(arr[0])
      var month=parseInt(arr[1])
      this.search(year,month)
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel"); //此处把路径要写对
        // //简单表格书写

        // //添加表格id
        // var myindex = [];
        // for (var i = 0; i < this.total; i++) {
        //   myindex[i] = i + 1;
        // }
        // var newindex = myindex.map((item) => {
        //   console.log(item);
        //   return {
        //     index: item,
        //   };
        // });

        // console.log("123321", myindex);
        // console.log("newindex", newindex);
        // //将添加的序号加入到表格中形成新的mergeArr表格
        // let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
        //   return prev.map((item, index) => {
        //     return Object.assign(item, curr[index]);
        //   });
        // });
        // console.log("mergeArr", mergeArr);
        // console.log("tableData", this.tableData);
        // const tHeader = [
        //   "日期",
        //   "序号",
        //   "所在支部",
        //   "姓名",
        //   "员工编号",
        //   "身份证号",
        //   "性别",
        //   "出生日期",
        //   "学历",
        //   "最高学位",
        //   "民族",
        //   "籍贯",
        //   "手机",
        //   "邮箱",
        //   "工作单位",
        //   "家庭住址",
        //   "人员类别",
        //   "加入党组织日期",
        //   "转正日期",
        //   "人员身份",
        // ];
        // const filterVal = [
        //   "rq",
        //   "index",
        //   "szzb",
        //   "name",
        //   "ygbh",
        //   "sfzh",
        //   "sex",
        //   "csrq",
        //   "xl",
        //   "zgxw",
        //   "mz",
        //   "jg",
        //   "telephone",
        //   "email",
        //   "gzdw",
        //   "jtzz",
        //   "rylb",
        //   "jrdzzrq",
        //   "zzrq",
        //   "rysf",
        // ];
        // // console.log(this.tableData);
        // // const myindex = Array.from(Array(this.total).keys(), (n) => n + 1);
        // // var myindex = [];
        // // for (var i = 0; i < this.total; i++) {
        // //   myindex[i] = i + 1; //
        // // }

        // const list = mergeArr;
        // const data = this.formatJson(filterVal, list);

        // export_json_to_excel({
        //   header: tHeader,
        //   data: data,
        //   filename: "党员名册",
        //   autoWidth: true,
        //   bookType: "xlsx",
        // }),
        //   this.$message.success("导出报表成功！");

        //复杂表头书写
        //添加表格id
        var myindex = [];
        for (var i = 0; i < this.total; i++) {
          myindex[i] = i + 1;
        }
        var newindex = myindex.map((item) => {
          console.log(item);
          return {
            index: item,
          };
        });
        // //将添加的序号加入到表格中形成新的mergeArr表格
        let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
          return prev.map((item, index) => {
            return Object.assign(item, curr[index]);
          });
        });
        console.log("mergeArr", mergeArr);
        console.log("tableData", this.tableData);

        // const tHeader = ['日期', '姓名', '地址'];
        // // 上面设置Excel的表格第一行的标题
        //一级表头
        const multiHeader = [
          [
            "产量情况",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
          [
            "",
            "公司",
            "",
            "",
            "",
            "",
            "",
            "生产单位",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
          ],
          [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "一区",
            "",
            "",
            "",
            "",
            "二区",
            "",
            "",
            "",
            "",
            "三区",
            "",
            "",
            "",
            "",
            "四区",
            "",
            "",
            "",
            "",
            "五区",
            "",
            "",
            "",
            "肇州",
            "",
            "",
            "",
            "公司",
          ],
        ];

        const tHeader = [
          "日期",
          "公司计划",
          "公司外输",
          "公司核实",
          "公司末端",
          "差值",
          "末端",
          "计划",
          "末端",
          "百分比",
          "分摊",
          "核实后",
          "计划",
          "末端",
          "百分比",
          "分摊",
          "核实后",
          "计划",
          "末端",
          "百分比",
          "分摊",
          "核实后",
          "计划",
          "末端",
          "百分比",
          "分摊",
          "核实后",
          "计划",
          "末端",
          "差值",
          "核实后",
          "计划",
          "末端",
          "差值",
          "核实后",
          "落地油",
        ];
        //表头字段
        const filterVal = [
          "date",
          "gsGsjh",
          "gsGsws",
          "gsGshs",
          "gsGsend",
          "gsCz",
          "gsEnd",
          "yqPlan",
          "yqEnd",
          "yqPercent",
          "yqFt",
          "yqHsh",
          "eqPlan",
          "eqEnd",
          "eqPercent",
          "eqFt",
          "eqHsh",
          "sanqPlan",
          "sanqEnd",
          "sanqPercent",
          "sanqFt",
          "sanqHsh",
          "siqPlan",
          "siqEnd",
          "siqPercent",
          "siqFt",
          "siqHsh",
          "wqPlan",
          "wqEnd",
          "wqCz",
          "wqHsh",
          "zzPlan",
          "zzEnd",
          "zzCz",
          "zzHsh",
          "gsLdy",
        ];
        //需要合并的单元格
        const merges = [
          "A1:AI1",
          "B2:G2",
          "H2:AI2",
          "H3:L3",
          "M3:Q3",
          "R3:V3",
          "W3:AA3",
          "AB3:AE3",
          "AF3:AI3",
        ];
        //表头样式
        let headerStyle = [
          "A1",
          "B1",
          "C1",
          "D1",
          "E1",
          "F1",
          "G1",
          "H1",
          "I1",
          "J1",
          "K1",
          "L1",
          "M1",
          "N1",
          "O1",
          "P1",
          "Q1",
          "R1",
          "S1",
          "T1",
          "U1",
          "V1",
          "W1",
          "X1",
          "Y1",
          "Z1",
          "AA1",
          "AB1",
          "AC1",
          "AD1",
          "AE1",
          "AF1",
          "AG1",
          "AH1",
          "AI1",
          "AJ1",
        ];
        // 上面的index、nickName、name是tableData里对象的属性
        console.log(this.tableData);
        // const list = this.tableData;  //把data里的tableData存到list
        // const data = this.formatJson(filterVal, list);
        const list = mergeArr;
        const data = this.formatJson(filterVal, list);
        console.log(111111);
        console.log(list);
        console.log(data);

        export_json_to_excel({
          //header: tHeader,
          multiHeader: multiHeader,
          header: tHeader,
          merges: merges,
          headerStyle: headerStyle,
          data: data,
          filename: "产量情况",
          autoWidth: true,
          bookType: "xlsx",
        }); //"列表excel"  是下载后的表名 可修改
        this.$message.success("导出报表成功！");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => {
        return filterVal.map((j) => v[j]);
      });
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    /*** 当每页数量发生变化时触发该事件 */
    // handleSizeChange(size) {
    //   console.log(size);
    //   this.pageSize = size;
    //   //将每页显示的数量交给成员变量
    //   this.search(this.pageNo, size);
    // },
    // /*** 当页码发生变化时触发该事件 */
    // handleCurrentChange(page) {
    //   console.log(page);
    //   this.pageNo = page;
    //   //调用查询方法
    //   this.search(page, this.pageSize);
    // },
    // // 序号计算
    // indexMethod(index) {
    //   // index默认在0开始，这里+1
    //   return index + 1 + (this.pageNo - 1) * this.pageSize;
    // },
    // 获取当前日期
    filterTime() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      this.currentTime = y + "-" + m + "-" + d;
    },
    //日期查询点击事件
    reload() {
      this.tableData = [];

      console.log(1010);
      console.log(this.value1[0]); //value1[0] 开始时间 value1[1] 结束时间
      this.startDate = this.value1[0];
      this.endDate = this.value1[1];
      this.search();
      //  console.log(this.value1[0]);
      //this.$refs.table.reload({ page: 1 });
    },
  },
};
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}

//表单禁用字体样式
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
}

//对话框宽度
// .customWidth{
//         width:80%;
//     }
::v-deep .saveAsDialog {
  width: 60% !important;
}
</style>
